<template>
  <div>
    <Personinfo style="height: 50px;"></Personinfo>
    <Logox></Logox>
    <menux></menux>
    <el-main>
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>视频资源</span>
          <Video v-for="video in videos "
                 :title="video.title"
                 :id="video.id"
                 :count="video.viewCount"
                 :type="video.videoType"
                  @click="playVideo"></Video>
        </el-tab-pane>
        <el-tab-pane label="图片资源">暂无图片资源</el-tab-pane>
      </el-tabs>
      <el-row style="margin-top: 20px">
        <el-pagination style="margin-left: 200px"
                       :current-page="1"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="400">
        </el-pagination>
      </el-row>
    </el-main>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import menux from '../menux'
import Logox from '../Logox'
import Personinfo from "../Personinfo";
import Video from "./Video";


export default {
  name: "StudyVideo",
  components: {Video, menux,Logox,footerx,Personinfo},
  data (){
    return {
      videos:[
        {id:1,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:2,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:3,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:4,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:5,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:6,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:7,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:8,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:9,title:'建党100周年XXX某某学习视频1',videoType:'党政学习',viewCount:6},
        {id:10,title:'建党100周年XXX某某学习视频2',videoType:'党政学习',viewCount:2}
      ]
    }
  },
  methods:{
    playVideo(e){
      this.$router.push("PlayVideo")
    }
  }
}
</script>

<style scoped>
.el-main{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
</style>